<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <!--当前示例页面样式表引用-->
    <link rel="stylesheet" href="./static/demo/openlayers/example/style.css" />
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script src="./static/libs/include-openlayers-local.js"></script>
    <style type="text/css">
        #mapCon {
            width: 100%;
            height: 95%;
            position: absolute;
        }

        /* 图层控件层样式设置 */
        .layerControl {
            position: absolute;
            padding-bottom: 5px;
            min-width: 180px;
            left: 10px;
            top: 5px;
            /*在地图容器中的层，要设置z-index的值让其显示在地图上层*/
            z-index: 2001;
            color: #ffffff;
            background-color: #4c4e5a;
            /*边缘的宽度*/
            border-width: 10px;
            /*圆角的大小 */
            border-radius: 10px;
            /*边框颜色*/
            border-color: #000 #000 #000 #000;
        }

        .layerControl .title {
            font-weight: bold;
            font-size: 12px;
            margin: 10px 0px 5px 10px;
        }
        .layerTree{
            padding-inline-start: 0px;
            margin: 5px;
            height: auto;
        }
        .layerTree li {
            list-style: none;
            margin: 5px 10px;
            font-size: 6px;
            font-weight: 300;
        }
        li .layer{
            position: absolute;
            margin-top: 2px;
            font-size: 6px;
            font-family: 'Times New Roman', Times, serif;
        }
        .ol-mouse-position {
            top: 95%;
            right: 8px;
            position: absolute;
        }
    </style>

    <script type="text/javascript">
        var vectorSourceLayer = null;
        //缓存结果图层的基地址
        var resultBaseUrl = "gdbp://MapGisLocal/OpenLayerVecterMap/sfcls/";
        var resultLayer;
        var map = null;

        function init() {    
            //初始化地图文档图层对象
            vectorSourceLayer = new Zondy.Map.GdbpLayer("MapGIS IGS VectorLayer", ["gdbp://MapGisLocal/OpenLayerVecterMap/ds/世界地图经纬度/sfcls/世界政区"], {
                ip: "develop.smaryun.com",
                port: "6163"    //访问IGServer的端口号，.net版为6163，Java版为8089
            });

            //初始化地图容器
            map = new ol.Map({
                target: 'mapCon',     //地图容器div的ID
                controls: ol.control.defaults({
                    zoom: false
                }),
                view: new ol.View({
                    center: [0, 0],
                    zoom: 1,
                    projection: "EPSG:4326"
                }),
                layers:[vectorSourceLayer]
            });
            
            map.addControl(new ol.control.MousePosition());
            //加载图层列表数据
            loadLayersControl(map, "layerTree");
        
        }

        //map中的图层数组
        var layerArr = new Array();
        //图层名称数组
        var layerNameArr = new Array();
        //图层可见属性数组
        var layerVisibilityArr = new Array();
        //图层checkbox的Div元素数组
        var layerDivArr = new Array();

        function removeAllChildDiv(id)
        {
            var parentNode = document.getElementById(id); 
            var pObjs = parentNode.childNodes;
            if(pObjs!=null && pObjs.length>0)
            {
                for (var i = pObjs.length - 1; i >= 0; i--) {
                    parentNode.removeChild(pObjs[i]);
                }
            }
        }
        /**
        * 加载图层列表数据
        * @param {ol.Map} map 地图对象
        * @param {string} id 图层列表容器ID
        */
        function loadLayersControl(map, id) {
            removeAllChildDiv(id);
            //图层目录容器
            var treeContent = document.getElementById(id); 
            //获取地图中所有图层
            var layers = map.getLayers();
            for (var i = 0; i < layers.getLength() ; i++) {
                //获取每个图层的名称、是否可见属性
                layerArr[i] = layers.item(i);
                layerNameArr[i] = layerArr[i].layerName;
                layerVisibilityArr[i] = layerArr[i].getVisible();
                //新增li元素，用来承载图层项
                var elementLi = document.createElement('li');
                // 添加子节点
                treeContent.appendChild(elementLi); 
                //创建复选框元素
                var elementInput = document.createElement('input');
                elementInput.type = "checkbox";
                elementInput.name = "layer"+i;
            
                elementLi.appendChild(elementInput);
                //创建label元素
                var elementLable = document.createElement('label');
                elementLable.className = "layer";
                //设置图层名称
                setInnerText(elementLable, layerNameArr[i]);
                elementLi.appendChild(elementLable);
                //设置图层默认显示状态
                if (layerVisibilityArr[i]) {
                    elementInput.checked = true;
                }

                layerDivArr[i] = elementInput;
                //为checkbox添加变更事件
                addChangeEvent(elementInput, layerArr[i]);  
            }
        }
        /**
        * 为checkbox元素绑定变更事件
        * @param {input} element checkbox元素
        * @param {ol.layer.Layer} layer 图层对象
        */
        function addChangeEvent(element, layer) {
            element.onclick = function () {
                if (element.checked) {
                    //显示图层
                    for(var i=0;i<layerArr.length;i++)
                    {
                        layerArr[i].setVisible(false);
                    }
                    for(var i=0 ;i<layerDivArr.length;i++)
                    {
                        if(layerDivArr[i].name!=element.name)
                        {
                            layerDivArr[i].checked = false;
                        }
                    }
                    layer.setVisible(true);
                    if(element.name == "layer0")
                    {
                        map.getView().setCenter([0,0]);
                        map.getView().fit([-180,-90,180,90], map.getView().getSize);
                    }
                    else{
                        map.setView(new ol.View({
                            center: [0, 0],
                            zoom: 1,
                            projection: layer.projection
                        }) );
                    }
                    
                }
                else {
                    //不显示图层
                    layer.setVisible(false); 
                }
            
            };
        }
        /**
        * 动态设置元素文本内容（兼容）
        */
        function setInnerText(element, text) {
            if (typeof element.textContent == "string") {
                element.textContent = text;
            } else {
                element.innerText = text;
            }
        }



        function projectByCrsID()
        {
            //结果名称
            var resultname = resultBaseUrl + "projectBySRIDResultLayer" + getCurentTime();
            //初始化Zondy.Service. ProjectBySRID类
            var projBySRID = new Zondy.Service.ProjectBySRID({
                ip: "develop.smaryun.com",
                port: "6163",    //访问IGServer的端口号，.net版为6163，Java版为8089,
                //参照系ID
                srID: 606
            });
            //需转换的要素类地址，继承于ProjectBase类属性
            projBySRID.clsName = "gdbp://MapGisLocal/OpenLayerVecterMap/ds/世界地图经纬度/sfcls/世界政区";
            //结果要素类地址，继承ProjectBase类属性
            projBySRID.desClsName = resultname;
            //调用基类的execute方法，执行投影变换， projectLayerSuccess为结果回调函数，服务器请求方式为POST
            projBySRID.execute(projectLayerSuccess, "post", false, 'json', AnalysisError);
        
        }

        //根据空间参照系信息对图层进行投影转换
        function projectByCrs() {
            //结果名称，加当前时间为后缀放置数据库中重名
            var resultname = resultBaseUrl + "projectByParamResultLayer" + getCurentTime();
            //初始化图层投影转换服务类Zondy.Service.ProjectByLayer类
            var projByLayer = new Zondy.Service.ProjectByLayer({
                //设置服务ip
                ip: "develop.smaryun.com",
                //设置端口号
                port: "6163",    //访问IGServer的端口号，.net版为6163，Java版为8089,
                //投影类型，0地理坐标系，1UTM，2兰伯特等角圆锥投影坐标系
                projTypeID: 23,
                //椭球体类型，2为西安80
                sphereType: 2,
                //弧度单位，1为毫米，2为米，3为秒，4为度，6为英尺，7为分，8为弧度
                projAngleUnit: 5,
                //坐标系类型，0为自定义坐标系、1地理坐标系，3投影平面直角坐标系
                projType: 0,
                //投影分带类型
                projZoneType: 0,
                //投影带号
                projZoneNO: 0,
                //中央子午线经度
                projLon: 0,
                //投影原点纬度
                projLat: 0,
                //第一标准维度
                projLat1: 0,
                //第二标准维度
                projLat2: 0,
                //水平单位，1为毫米，2为米，3为秒，4为度，6为英尺，7为分，8为弧度，详细请参见EnumProjAngleUnit
                projUnit: 2,
                //水平比例尺
                projRate: 1,
                x: 0,
                y: 0,
                resultName: "rel"
            });
            //需转换的要素类地址，继承于ProjectBase类属性
            projByLayer.clsName = "gdbp://MapGisLocal/OpenLayerVecterMap/ds/世界地图经纬度/sfcls/世界政区";
            //结果要素类地址，继承ProjectBase类属性
            projByLayer.desClsName = resultname;
            //调用基类的execute方法，执行投影变换， projectLayerSuccess为结果回调函数，服务器请求方式为POST
            projByLayer.execute(projectLayerSuccess, 'post', false, 'json', AnalysisError);
        }

        //分析失败回调
        function AnalysisError(e) {
        alert("投影失败!")
        }
        //执行成功后的回调
        function projectLayerSuccess(data) {
            var extent = [-20026385.8132509, -20037517.7675672, 20026385.8132528, 18418390.9921342];
            var projection = new ol.proj.Projection({ units: ol.proj.Units.METERS, extent: extent, code: "EPSG:3857" });
            //中心点
            var center = ol.extent.getCenter(extent);
            if (!data.succeed) {
                alert("投影失败，请检查参数！");
            }
            else {
                if (data.results.length != 0) { 
                    var resultLayerUrl = data.results[0].Value;
                    //将结果图层添加到地图视图中显示
                    resultLayer = new Zondy.Map.Layer("Result"+getCurentTime(), [resultBaseUrl + resultLayerUrl], {
                        ip: "develop.smaryun.com",
                        port: "6163"    //访问IGServer的端口号，.net版为6163，Java版为8089
                    });
                    resultLayer.projection = projection;
                    resultLayer.setVisible(false); 
                    map.addLayer(resultLayer);
                    loadLayersControl(map,"layerTree");
                }
            }
        }

        /*========================================获取当前时间（如：2015-09-09-120000）===================================================*/
        //当前日期加时间(如:2009-06-12-120000)
        function getCurentTime() {
            var now = new Date();
            //获取当前年份
            var year = now.getFullYear();
            //获取当前月份
            var month = now.getMonth() + 1;
            //获取当前日期
            var day = now.getDate();
            //获取当前时刻
            var hh = now.getHours();
            //获取当前分钟
            var mm = now.getMinutes();
            //获取当前秒钟
            var ss = now.getSeconds();
            //将当前的日期拼串
            var clock = year + "-";
            if (month < 10)
                clock += "0";
            clock += month + "-";
            if (day < 10)
                clock += "0";
            clock += day + "-";
            if (hh < 10)
                clock += "0";
            clock += hh;
            if (mm < 10) clock += '0';
            clock += mm;
            if (ss < 10) clock += '0';
            clock += ss;
            return (clock);
        }

    </script>
</head>

<body onload="init()">
    <div id="mapCon">
        <div id="layerControl" class="layerControl">
            <div class="title"><label>图层列表</label></div>
            <ul id="layerTree" class="layerTree"></ul>
        </div>
    </div>
    <div id="menuContain" class='menuContain'>
        <div id="tool-container">
            <div id='dataSourceMenuID'  class="optmain"  status="unactive" onclick="switchMenuStatus(this,'menu1')">
                <span></span><i class="menuGroup">图层投影</i><em></em>
            </div>
        </div>
    </div>
    <div id="menu1" class="menuStrip" style='display:none' >
        <ul  class="menuItems">
            <li   onclick="projectByCrs()"><span class="item1"></span><i >参照系信息</i>
            </li>
            <li  onclick="projectByCrsID()"><span class="item1"></span><i >参照系ID</i>
            </li>
        </ul>
    </div>
 </div>
 <script>
    function switchMenuStatus(div, menuitemFrameID) {
        var temDivs = document.getElementsByClassName('optmain');
        if (temDivs.length > 0) {
            for (var i = 0; i < temDivs.length; i++) {
                if (temDivs[i] === div) {
                    var status = div.getAttribute("status");
                    if (status == "unactive") {
                        div.setAttribute("status", "active");
                        var tem_spans = div.getElementsByTagName("span");
                        var tem_ems = div.getElementsByTagName("em");
                        tem_spans[0].className = "active";
                        tem_ems[0].className = "active";

                        //显示菜单项
                        DisplayMenuItem(true, menuitemFrameID);

                    }
                    else {
                        div.setAttribute("status", "unactive");
                        var tem_spans = div.getElementsByTagName("span");
                        var tem_ems = div.getElementsByTagName("em");
                        tem_spans[0].className = "";
                        tem_ems[0].className = "";

                        //隐藏菜单项
                        DisplayMenuItem(false, menuitemFrameID);
                    }
                }
                else {
                    var status = temDivs[i].getAttribute("status");
                    if (status == "active") {
                        temDivs[i].setAttribute("status", "unactive");
                        var tem_spans = temDivs[i].getElementsByTagName("span");
                        var tem_ems = temDivs[i].getElementsByTagName("em");
                        tem_spans[0].className = "";
                        tem_ems[0].className = "";
                    }
                }
            }
        }
    }

    function DisplayMenuItem (isDisplay, iframeID) {
        var menuItemFrame = document.getElementById(iframeID);
        if (menuItemFrame != null) {
            if (isDisplay) {
                var temDivs = document.getElementsByClassName('menuStrip');
                if (temDivs.length > 0) {
                    for (var i = 0; i < temDivs.length; i++) {
                        if (temDivs[i] != menuItemFrame) {
                            temDivs[i].style.display = "none";
                        }
                    }   
                }
                menuItemFrame.style.display = "";
            }
            else {
                menuItemFrame.style.display = "none";
            }
        }
    };
 </script>
</body>

</html>